<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>桌面插件配置修改</title>
	<%@include file="/WEB-INF/views/include/head.jsp" %>
	<script type="text/javascript">

$(function(){


			$(".t_inner_select").on("click", ".source_item",function() {
				$(".source_item").removeClass("selected");
				$(this).addClass("selected");
								
			});
			
			$(".t_inner_select").on("click",".target",function() {	
				$(".target").removeClass("selected");
				$(this).addClass("selected");							
			});	
			
			
		$("#moveToRight")
					.on(
							"click",null,
							function() {
								var selectList = $('#t_inner_select_source .selected');
								var tResultHtml = "";
								$
										.each(
												selectList,
												function(index, row) {
													var rel = $(row)
															.attr("rel");
													var text = $(row).text();
													selectList.remove(index);
													var selectItem = "<span class=\"t_inner_select_span target\" rel=\""+rel+"\">"
															+ text + "</span>";
													tResultHtml = tResultHtml
															+ selectItem
															+ "\r\n";

												});
								$('#t_inner_select_target').append(tResultHtml);
							});

			$("#moveToLeft")
					.on(
							"click",null,
							function() {

								var selectList = $('#t_inner_select_target .selected');
								var tResultHtml = "";
								$
										.each(
												selectList,
												function(index, row) {
													var rel = $(row)
															.attr("rel");
													var text = $(row).text();
													selectList.remove(index);
													var selectItem = "<span class=\"t_inner_select_span source_item\" rel=\""+rel+"\">"
															+ text + "</span>";
													tResultHtml = tResultHtml
															+ selectItem
															+ "\r\n";

												});
								$('#t_inner_select_source').append(tResultHtml);
							});
							


		$('#btnSubmit').click(function() {
		loading('正在提交，请稍等...');
		var sourceIds = "";
		var selectList = $('#t_inner_select_target span');
		$.each(selectList, function(index, row) {
			var rel = $(row).attr("rel");
			sourceIds = sourceIds + rel + ",";
		});
		
		var roleId = $('#roleId').val();
		$('#plugIds').val(sourceIds);		
				$.ajax({
					url : '${ctxAdmin}/sys/desktopPlugConfig/save',
					data : {
						roleId : roleId,
						plugIds:sourceIds
					},
					dataType : 'json',
					success:function(res){
					var code = res.code;
					var message = res.message;				
					layer.msg(message);
					closeWindow();
					$('#jqGrid').trigger("reloadGrid");
					}
				});
			});
			
		
});


	</script>


<style type="text/css">
.selected {
	color: #3CAAE9;
}

.t_out {
	border: 1px solid #cccccc;
	height: 250px;
	margin-top: 12px;
	padding: 8px;
	width: 90%;
	margin-left: 32px;
}

.t_inner {
	float: left;
	height: 96%;
	text-align: center;
}

.t_inner_title {
	display: block;
	font-weight: bolder;
	text-align: center;
}

.t_inner_select {
	border: 1px solid #cccccc;
	height: 97%;
	overflow: auto;
	width: 100%;
	text-align: left;
}

.t_inner_select_span {
	padding: 3px;
	white-space: nowrap;
	float: none;
	display: block;
}

.t_inner_select_span:HOVER {
	cursor: pointer;
	color: #3CA9E9;
}
</style>



</head>
<body>
	
	
	<form id="inputForm" action="${ctxAdmin}/sys/desktopPlugConfig/save" method="post" class="form-horizontal">
		<input id="roleId" name="roleId" value="${role.id }" type="hidden"/>
		
		<input id="plugIds" name="plugIds" type="hidden"/>
		

		<div class="form-group">
			<label class="control-label" style="padding-left: 18px;padding-top: 8px;">角色名称：<span>${role.name }</span></label>								
		</div>
		
		
		<div class="form-group">
				
			<div class="controls">

				<div class="t_out">			

					<div class="t_inner" style="width: 40%;margin-left: 12px;">
						<span class="t_inner_title">可选插件</span>
						<div class="t_inner_select" id="t_inner_select_source">
						
							 <c:forEach items="${unSelectList}" var="v">
								<span class="t_inner_select_span source_item" rel="${v.id }">${v.name}</span>
							</c:forEach>	 
															
						</div>
					</div>

					<div class="t_inner" style="width: 5%;margin-left: 12px;">
                         <input type="button" value="&gt;" class="common-btn"
							style="margin-top:5px;width: 46px;margin-top: 120px;"
							id="moveToRight" title="右移" />
                         <input type="button"
							value="&lt;" class="common-btn"
							style="margin-top:5px;width: 46px;" id="moveToLeft" title="左移" /><br />
						<br /> 
					</div>

					<div class="t_inner" style="width: 40%;float: right;">
						<span class="t_inner_title">已选插件</span>
						<div class="t_inner_select" id="t_inner_select_target">

							<c:forEach items="${hasSelectList}" var="v">
								<span class="t_inner_select_span target" rel="${v.plugId }">${v.plugIdName}</span>
							</c:forEach>
						</div>
					</div>

				</div>

			</div>
									
		</div>
		
		
		<div class="form-group action-button">
			<shiro:hasPermission name="sys:desktopPlugConfig:edit"><input id="btnSubmit" class="btn btn-primary" type="button" value="保 存"/>&nbsp;</shiro:hasPermission>
			<input id="btnCancel" class="btn" type="button" value="关 闭" onclick="closeWindow()"/>
		</div>
		
	</form>
</body>
</html>